<script setup lang="ts">
import { ref } from 'vue';

const isCountDowFinished = ref<boolean>(false);
</script>

<template>
  <div
    class="flex items-center justify-center border-t border-orange-300 bg-orange-100 py-0.5 xl:rounded-sm xl:border"
    v-if="!isCountDowFinished"
  >
    <MSvgIcon
      name="countdown"
      class="mr-1 h-1.5 w-1.5"
      fillClass="fill-red-600"
    />
    <p class="text-xs font-bold text-red-600">
      限时特惠 | 距离优惠结束仅剩
      <MCountDown
        :time="52 * 60 * 1000"
        class="inline-block"
        @finish="isCountDowFinished = true"
      />
    </p>
  </div>
</template>
